<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <div>
      <p>
        moduleDemo1内count: {{ $store.state.demo1.count }} , 数值是
        {{ oddOrEven }}
      </p>
      <p>全局的count: {{ $store.state.count }}</p>
      <p>moduleDemo2内count: {{ $store.state.demo2.count }}</p>
      <p>内部count+全局count==={{ sumWithRootCount }}</p>
      <p>命名空间下的: {{ childPage }}</p>
      <p>命名空间下的: {{ childCode }}</p>
      <p>moduleDemo2的someGetter: {{ someGetter }}</p>
      <button @click="increment">模块1内点击+</button>
      <button @click="decrement">模块1内点击-</button>
      <button @click="incrementIfOdd">模块1内点奇数+</button>
      <button @click="incrementAsync">模块1内点异步+</button>
      <button @click="globalIncrement">全局点击+</button>
      <button @click="afterAdd">二者求和若为奇数则局部+</button>
      <button @click="increment2">模块2内点击+</button>
      <button @click="increment10">模块2内点击+10</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Demo1",
  props: {
    msg: String,
  },
  computed: {
    oddOrEven() {
      //return this.$store.getters.oddOrEven;
      return this.$store.getters["demo1/oddOrEven"];
    },
    sumWithRootCount() {
      return this.$store.getters["demo1/sumWithRootCount"];
    },
    childPage() {
      return this.$store.getters["demo1/test"];
      //return "demo1/test";
    },
    childCode() {
      return this.$store.getters["demo1/code/numberType"];
    },
    someGetter() {
      return this.$store.getters["demo2/someGetter"];
    },
  },
  methods: {
    increment() {
      this.$store.commit("demo1/increment");
      //this.$store.dispatch("demo1/increment");
    },
    decrement() {
      this.$store.dispatch("demo1/decrement");
    },
    incrementIfOdd() {
      this.$store.dispatch("demo1/incrementIfOdd");
    },
    incrementAsync() {
      this.$store.dispatch("demo1/incrementAsync");
    },
    globalIncrement() {
      this.$store.commit("increment");
    },
    afterAdd() {
      this.$store.dispatch("demo1/incrementIfOddOnRootSum");
    },
    increment2() {
      this.$store.commit("demo2/increment");
    },
    increment10() {
      this.$store.dispatch("someAction", { amount: 10 });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
